import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import Title from '@/components/Title'


import * as echarts from 'echarts'

export default function TheTraining({ res }) {
    const fourRef = useRef(null)

    useEffect(() => {
        const myChart04 = echarts.init(fourRef.current)
        const updateOption = () => {
            let colors = ['#4870F3', '#8F78EC', '#51D4B2', '#ED7D52', '#847C74']
            let option04 = res ? {
                color: colors,
                series: [
                    {
                        top: 10,
                        type: 'funnel',
                        left: '7%',
                        width: '50%',
                        gap: 0,
                        minSize: 68,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 0
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{b}人',
                            color: '#fff',
                            fontSize: 16,
                            fontWeight: 400,
                        },
                        data: [
                            { value: res?.total, name: res?.total },
                            { value: res?.moca?.reduce((prev, current) => prev + current.num, 0), name: res?.moca?.reduce((prev, current) => prev + current.num, 0) },
                            {
                                value: res?.moca?.reduce((prev, current) => {
                                    if (current.result === '正常') {
                                        return prev
                                    } else {
                                        return prev + current.num
                                    }
                                }, 0), name: res?.moca?.reduce((prev, current) => {
                                    if (current.result === '正常') {
                                        return prev
                                    } else {
                                        return prev + current.num
                                    }
                                }, 0)
                            },
                            { value: res?.total_xl, name: res?.total_xl },
                            { value: res?.total - res?.total_xl, name: res?.total - res?.total_xl }
                        ]
                    },

                    {
                        top: 10,
                        type: 'funnel',
                        left: '7%',
                        width: '50%',
                        gap: 0,
                        z: 1,
                        minSize: 68,
                        label: {
                            color: '#fff',
                            fontSize: 16,
                            fontWeight: 400,
                            fontFamily: 'SourceHanSansCN-Regular',
                            position: 'right',
                            padding: 5,
                        },
                        labelLine: {
                            show: true,
                            normal: {
                                length: 100,
                                position: 'right',
                                lineStyle: {
                                    width: 2,
                                    color: '#e8e9f1',
                                    type: 'dotted'
                                },
                            },

                        },
                        itemStyle: {
                            normal: {
                                color: 'transparent',
                                borderWidth: 0,
                                opacity: 1
                            }
                        },
                        data: [
                            { value: res?.total, name: '辖区全部人数' },
                            { value: res?.moca?.reduce((prev, current) => prev + current.num, 0), name: '测评完成数' },
                            {
                                value: res?.moca?.reduce((prev, current) => {
                                    if (current.result === '正常') {
                                        return prev
                                    } else {
                                        return prev + current.num
                                    }
                                }, 0), name: '需训练数'
                            },
                            { value: res?.total_xl, name: '训练数' },
                            { value: res?.total - res?.total_xl, name: '脱钩数' },
                        ]
                    }
                ]
            } : {}
            myChart04.setOption(option04)
        }

        updateOption()

        const handleResize = () => {
            updateOption()
            myChart04.resize()
        }
        window.addEventListener("resize", handleResize)
    }, [res])
    return (
        <div className={styles.the_training_container}>
            <Title titleDescription={'训练依从性/行为异常'} />
            <div className={styles.threeEchart} ref={fourRef}></div>
        </div>
    )
}
